<template>
	<view class="content">
		<pubTitle :title="title" subtitle="index副标题"></pubTitle>
		
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="content" v-text="text">
			
		</view>
		<view class="content" v-text="text2">
			
		</view>
		<view class="content2" v-html="text2">
			
		</view>
		<view class="content2" v-bind:style="style" @click="click">
			v-bind test 
		</view>
		
		<view v-if="show">
			{{text}}
		</view>
		<view v-else>
			你好
		</view>
		<button @click="onClickChanged">修改</button>
		
		
		<view v-for="(item, index) in list" :key="index">
			{{text}}
			{{item}}-------{{index}}
		</view>
		
		<view>
			<view class="content">
				<input type="text" value="" />
				<button type="primary">提交</button>
				<view class="">
					<view class="">
						
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<!-- 这里添加监听事件 change, 监听到事件后，再触发index页面的changed 事件 -->
			<childVue @change="changed" :text="parentText"></childVue>
		</view>
		<view class="">
			子组件传递过来的值：{{childTitle}}
		</view>
		
		<myevent title="组件间的传值" @myinput="onInput"></myevent>
		<mypop :state="mystate" @popClose="popClose"></mypop>
		<button @click="onShowMyPop">开启</button>
		
		<mypopsync v-model:state='mystatesync'></mypopsync>
		<!-- <mypopsync :state.sync='mystatesync'></mypopsync> -->
		<button @click="onShowMyPopSync">开启PopSync</button>
		
	</view>
</template>

<script>
	import childVue from '../../components/child.vue';
	
	export default {
		components:{
			childVue
		},
		
		data() {
			return {
				title: 'Hello',
				text: "hello world",
				text2: "<p>hello world</p>",
				style: "font-size:30px;color:#f0f0f0",
				
				show: true,
				list:[
					"hello world",
					"ssfdsfdsfdfs0",
					"棒棒㐱㐱㐱",
					"435爱你的"
				],
				parentText: "我是父组件",
				childTitle:"",
				
				
				mystate:false,
				mystatesync:false,
			}
		},
		onLoad() {

		},
		methods: {
			click:function(){
				console.log('click');
				this.style="font-size:30px;color:#000000"
			},
			
			onClickChanged:function() {
				this.show = !this.show;
			},
			changed(res){
				console.log(res);
				this.childTitle = res;
			},
			onInput(res) {
				console.log(res);
			},
			popClose(e) {
				console.log("popClose", e);
				this.mystate = false;
			},
			onShowMyPop() {
				this.mystate=!this.mystate;
			},
			onShowMyPopSync() {
				this.mystatesync = true;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.content2 {
		background-color: rebeccapurple;
	}
</style>
